<template>
  <div class="mobile-container">
    <!-- 内容区域 -->
    <div class="content">
      <router-view />
    </div>

    <!-- 底部导航栏 -->
    <div class="tab-bar safe-area-inset-bottom">
      <div 
        v-for="(item, index) in tabBarList" 
        :key="index" 
        class="tab-item"
        :class="{ 'active': currentPath === item.path }"
        @click="switchTab(item)"
      >
        <el-icon :size="20" :color="currentPath === item.path ? '#165DFF' : '#909399'">
          <component :is="item.icon"></component>
        </el-icon>
        <span class="tab-text" :style="{ color: currentPath === item.path ? '#165DFF' : '#909399' }">{{ item.text }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { 
  HomeFilled, 
  List, 
  Service, 
  UserFilled, 
  OfficeBuilding 
} from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()
const currentPath = ref('')

// 底部导航配置（图标、文字、路由）
const tabBarList = [
  { 
    text: '首页', 
    icon: HomeFilled,
    path: '/main/home'
  },
  { 
    text: '我的任务', 
    icon: List,
    path: '/main/my-tasks'
  },
  { 
    text: 'AI客服', 
    icon: Service,
    path: '/main/ai-service'
  },
  { 
    text: '班组', 
    icon: OfficeBuilding,
    path: '/main/team'
  },
  { 
    text: '我的', 
    icon: UserFilled,
    path: '/main/profile'
  }
]

// 初始化当前路径
onMounted(() => {
  currentPath.value = route.path
})

// 监听路由变化更新当前路径
watch(() => route.path, (newPath) => {
  currentPath.value = newPath
})

// 切换Tab
const switchTab = (item) => {
  if (item.path !== currentPath.value) {
    router.push(item.path)
  }
}
</script>

<style scoped>
.mobile-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: #f5f7fa;
}

.content {
  flex: 1;
  padding: 16px;
  padding-bottom: 80px; /* 为底部导航留出空间 */
}

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  border-top: 1px solid #e4e7ed;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 60px;
  z-index: 1000;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 4px;
  cursor: pointer;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.tab-item:active {
  transform: scale(0.95);
}

.tab-text {
  font-size: 12px;
  margin-top: 4px;
  font-weight: 500;
}

.active {
  color: #165DFF;
}

/* 移动端适配 */
@media screen and (max-width: 600px) {
  .content {
    padding: 12px;
    padding-bottom: 70px;
  }
  
  .tab-bar {
    height: 55px;
  }
  
  .tab-text {
    font-size: 11px;
  }
  
  .tab-item {
    padding: 6px 2px;
  }
}

@media screen and (max-width: 375px) {
  .content {
    padding: 10px;
    padding-bottom: 65px;
  }
  
  .tab-bar {
    height: 50px;
  }
  
  .tab-text {
    font-size: 10px;
    margin-top: 2px;
  }
  
  .tab-item {
    padding: 4px 1px;
  }
}

@media screen and (max-width: 320px) {
  .content {
    padding: 8px;
    padding-bottom: 60px;
  }
  
  .tab-bar {
    height: 48px;
  }
  
  .tab-text {
    font-size: 9px;
  }
}
</style> 